import '@testing-library/jest-dom'
import { render, screen, fireEvent } from '@testing-library/react';
import SearchBar from '@/components/SearchBar'; // Adjust the path as necessary

describe('SearchBar', () => {
    const mockSetSearchTerm = jest.fn(); // Mock function for setSearchTerm

    beforeEach(() => {
        jest.clearAllMocks(); // Clear mocks before each test
    });

    it('renders the input field with the correct value', () => {
        const searchTerm = 'Inception';
        render(<SearchBar searchTerm={searchTerm} setSearchTerm={mockSetSearchTerm} />);

        // Check if the input field is rendered with the correct value
        const input = screen.getByPlaceholderText(/search movies by title.../i);
        expect(input).toBeInTheDocument();
        expect(input).toHaveValue(searchTerm);
    });

    it('calls setSearchTerm with the correct value when input changes', () => {
        const searchTerm = 'Inception';
        render(<SearchBar searchTerm={searchTerm} setSearchTerm={mockSetSearchTerm} />);

        // Change the input value
        const input = screen.getByPlaceholderText(/search movies by title.../i);
        fireEvent.change(input, { target: { value: 'The Dark Knight' } });

        // Check if setSearchTerm was called with the new value
        expect(mockSetSearchTerm).toHaveBeenCalledWith('The Dark Knight');
    });
});